@extends('wx.layout.default')

@section('wx.pbody')

  <div class="weui-form">

    @include('wx.layout.header')

    <form class="form-horizontal" id="wx" autocomplete="off">
      {{ csrf_field() }}

      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <input type="hidden" id="gendar" value="">
          <input type="hidden" id="birthday" value="">
          <div class="weui-cells__title">填写注册信息</div>
          <div class="weui-cells weui-cells_form">

            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" name="name" type="text" placeholder="请输入学生姓名" maxlength="20">
              </div>
            </div>

            <div class="weui-cell weui-cell_access" id="showGendar">
              <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
              <div class="weui-cell__bd label">
                <input class="weui-input" placeholder="请选择性别" readonly>
              </div>
              <div class="weui-cell__ft"></div>
            </div>

            <div class="weui-cell weui-cell_access">
              <div class="weui-cell__hd"><label for="" class="weui-label">证件号码</label></div>
              <div class="weui-cell__bd">
                <input name="idcard" class="weui-input" type="text" placeholder="请输入学生或家长身份证号码" maxlength="18">
              </div>
            </div>

            <div class="weui-cell weui-cell_access" id="showDatePicker">
              <div class="weui-cell__hd"><label class="weui-label">出生日期</label></div>
              <div class="weui-cell__bd label">
                <input class="weui-input" placeholder="请选择出生日期" readonly>
              </div>
              <div class="weui-cell__ft"></div>
            </div>

            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" name="mobile" type="tel" placeholder="请输入手机号码" maxlength="11">
              </div>
            </div>

            <div class="weui-cell weui-cell_active weui-cell_vcode">
              <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" name="smscode" value="" type="tel" placeholder="请输入验证码" maxlength="6">
              </div>
              <div class="weui-cell__ft">
                <button class="weui-btn weui-btn_default weui-vcode-btn sms">获取验证码</button>
              </div>
            </div>

          </div>
        </div>

      </div>

      <div class="weui-form__opr-area">
        <button class="weui-btn weui-btn_primary" id="btnLogin">确定</button>

        <a class="weui-btn weui-btn_default" href="{{route('wx.login')}}">已有账号登录</a>
      </div>

    </form>

  </div>

@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
  <script src="//res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
  <script type="text/javascript">
  $(function () {
      $('#showDatePicker').on('click', function () {
          var that = $(this);
          weui.datePicker({
              start: 1950,
              end: new Date().getFullYear(),
              defaultValue: [1999, 9, 9],
              onChange: function (result) {
                  //console.log(result);
              },
              onConfirm: function (result) {
                  $("#birthday").val(result[0]['value'] + '-' + result[1]['value'] + '-' + result[2]['value']);
                  console.log($("#birthday").val());
                  that.find('.label').text(result[0]['label'] + result[1]['label'] + result[2]['label']);
                  console.log(result);
              },
              title: '请选择出生日期'
          });
      });

      $('#showGendar').on('click', function () {
          var that = $(this);
          weui.picker([{
              label: '男',
              value: 1
          }, {
              label: '女',
              value: 2
          }], {
              onChange: function (result) {
                  //console.log(result);
              },
              onConfirm: function (result) {
                  $("#gendar").val(result[0]['value']);
                  that.find('.label').text(result[0]['label']);
                  console.log(result);
              },
              title: '请选择性别'
          });
      });

      $('.sms').on('click', function () {

          var uri = '{{route('wx.sms')}}';

          $.post(uri, {
              '_token': $("input[name='_token']").attr('value'),
              'mobile': $("input[name='mobile']").val(),
              'is_submit': true
          }, function (data) {
              layer.msg(data.message, {time: 1000, shift: -1}, function () {
                  if (data.status === true && data.url != null) {
                      $(window).attr('location', data.url);
                  }
              });

          }, 'json').error(function (data) {
              layer.msg(data.responseJSON.message);
          });

          var count = 60;
          const countDown = setInterval(() => {

              if (count === 0) {
                  $(this).text('获取验证码').removeAttr('disabled');
                  $(this).removeClass("grey");
                  clearInterval(countDown);
              } else {
                  $(this).attr('disabled', true);
                  $(this).addClass("grey");
                  $(this).text(count + '秒后重新发送');
              }
              count--;
          }, 1000);

      });

      $("#wx").validate({

          onfocusout: false,
          onkeyup: false,

          rules: {
              name: {required: true, isChinese: true, minlength: 2},
              gendar: {required: true},
              idcard: {required: true, isIdCardNo: true},
              birthday: {required: true, date: true},
              mobile: {required: true, isMobile: true},
              smscode: {required: true, digits: true, maxlength: 6, minlength: 6,},
          },
          messages: {
              name: {required: "请填写姓名", minlength: "名字不合法"},
              gendar: {required: "请选择性别"},
              idcard: {required: "请填写身份证号码", isIdCardNo: "身份证号码不正确"},
              birthday: {required: "请选择出生日期", date: "格式不正确"},
              mobile: {required: "请填写手机号码"},
              smscode: {required: "请填写验证码", maxlength: "验证码格式不正确", minlength: "验证码格式不正确", digits: "验证码格式不正确"},
          },

          showErrors: function (errorMap, errorList) {
              $.each(errorList, function (i, v) {
                  layer.tips(v.message, v.element, {tips: 3, time: 2000});
                  //$(v.element).closest('.weui-cell').addClass('weui-cell_warn');
                  return false;
              });

          },

          submitHandler: function (form) {
              $.post('{{route('wx.reg')}}', {
                  '_token': $("input[name='_token']").attr('value'),
                  'name': $("input[name='name']").val(),
                  'mobile': $("input[name='mobile']").val(),
                  'idcard': $("input[name='idcard']").val(),
                  'gendar': $("#gendar").val(),
                  'birthday': $("#birthday").val(),
                  'smscode': $("input[name='smscode']").val(),
                  'type': 1,
                  'source': 2,
                  'is_submit': true
              }, function (data) {
                  console.log(data);
                  layer.msg(data.message, {time: 1000, shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });
          }

      });


  });
  </script>
@stop